<template>
  <view class="page" :style="{ 'background-color': model == 'inline' ? '#fff' : '#f8f8f8' }">
    <!-- 头部 start -->
    <view class="cu-custom bg-white" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
      <view class="cu-bar bg-white fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
        <view class="action" @tap="back"><text class="cuIcon-back"></text></view>
        <view class="search-form round">
          <text class="cuIcon-search text-999"></text>
          <input
            confirm-type="search"
            class="text-999"
            type="text"
            v-model="keywords"
            :adjust-position="false"
            :hold-keyboard="false"
            placeholder-style="color:#999"
            :placeholder="placeholder"
            @confirm="searchConfirm"
          />
          <text v-if="keywords.length != 0" class="cuIcon-close text-gray padding-right-xs" @tap="handleClear"></text>
        </view>
        <view class="right padding-right">
          <text class="cuIcon-search" style="font-size: 36rpx;" @click="searchConfirm($event,1)"></text>
        </view>
      </view>
    </view>
    <!-- 头部 end -->
    <!-- 筛选 -->
    <fu-filter-dropdown :top="CustomBar" @changeLayout="changeLayout" @changeFilter="changeFilter" :filterKeyword="keywords" ref="childMethod" :cid="cid"></fu-filter-dropdown>
    <!-- loading组件 -->
    <fu-loading v-if="isShowLoading"></fu-loading>
    <block v-else>
      <!--商品列表 start-->
      <view class="list " :class="[model == 'inline' ? 'padding-lr-24' : 'padding-lr-4']">
        <view v-if="model == 'inline'">
          <block v-for="item in lists" :key="item.id">
            <view class="solid-bottom fu-goods-line" @click.stop="navToDetail(item)">
              <view class="block-246 margin-right-sm"><fu-image :src="item.thumb" mode="aspectFill"></fu-image></view>
              <view class="content">
                <view class="text-df text-333 text-cut-2">
                  {{ item.name }}
                </view>
                <text class="text-sm text-999">{{i18n['销量']}}{{ item.sales_sum | formatNumber(i18n['万']) }}</text>
                <view class="flex align-center">
                  <view class="text-prices flex align-center">
                    <text class="text-price text-bold text-sm"></text>
                    <text class="text-bold text-lg">{{ item.shop_price }}</text>
                  </view>
                  <view class="flex justify-between align-end through-price">
                    <text class="text-through text-sm text-price ">{{ item.market_price }}</text>
                  </view>
                </view>
              </view>
            </view>
          </block>
        </view>
				<view v-else class="padding-top flex align-center justify-between flex-wrap padding-lr-sm">
					<block v-for="(item, index) in lists" :key="index">
						<fu-goods-block :info="item"></fu-goods-block>
					</block>
				</view>
				<!-- <fu-waterfall v-model="lists">
					<template v-slot:left="{ leftList }">
						<block v-for="(item, index) in leftList" :key="item.id"><fu-goods-block :info="item"></fu-goods-block></block>
					</template>
					<template v-slot:right="{ rightList }">
						<block v-for="(item, index) in rightList" :key="item.id"><fu-goods-block :info="item"></fu-goods-block></block>
					</template>
				</fu-waterfall> -->
      </view>
      <!--商品列表 end-->
      <!-- 悬浮按钮 -->

      <!-- 空布局 -->
      <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
      <!-- 加载状态 -->
      <uni-load-more v-if="lists.length > 5" :status="status"></uni-load-more>
    </block>
    <!-- 断网检测组件 -->
    <fu-notwork></fu-notwork>
  </view>
</template>
<script>
// 基础筛选与高级筛选组件
import fuFilterDropdown from '../../components/fu-filter-dropdown/fu-filter-dropdown.vue';
export default {
  components: {
    fuFilterDropdown,
  },
  data() {
    return {
      timer: null, // 定时器
      type: 1, // 悬浮按钮状态 1 页码 2 返回顶部
      isShow: false, //是否显示按钮
      totalSize: 0, // 悬浮按钮总页码
      currentPage: 1, // 当前页页码
      isShowLoading: true, // 是否显示loading
      keywords: '', // 搜索的文本
      placeholder: global.i18n['请输入商品关键字'], // 默认文本
      model: 'block', // 布局样式
      lists: [], // 结果列表
      cid: '', // 分类id(点击分类跳转过来必传)
      isInit: false, // 是否请求过数据
      status: 'more', // 加载状态
      page: 1, // 页数
      size: 10, // 页条数
      sorts: '1', // 条件
      order: 'asc', // 排序 asc: 正序 desc: 倒序
    };
  },

  onLoad(options) {
    /***
     * @keyWords 关键词
     * @cid 分类id
     **/
    const { keyWords = '', cid = '' } = options;
    if (keyWords) {
      this.keywords = keyWords;
    }
    if (cid != '') {
      this.cid = cid;
    }
    this.handleSearch(); // 搜索方法
  },
  onReachBottom() {
    this.handleSearch(); // 搜索方法
  },
  methods: {
    /**
     * @event
     * @description 去商品详情
     */
    navToDetail(item) {
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail/index',
        params: {
          sku_id: item.sku_id || 0,
          goods_id: item.id
        }
      });
    },
    /**
     * @description 切换布局
     * @param {Object} e inline和block布局切换
     */
    changeLayout(e) {
      this.model = e;
    },
    /**
     * @description 切换搜索条件
     * @param {Object} type 条件
     * @param {Object} order  排序 asc: 正序 desc: 倒序
     * @param {Object} advancedSearch 高级搜索对象
     */
    changeFilter(type, order) {
      this.sorts = ++type;
      this.order = order;
      this.page = 1;
      this.status = 'more';
      this.scrollInfo = []; // 清空楼层数量
      this.handleSearch();
      this.$nextTick(() => {
        // 切换条件回到底部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 0
        });
      });
    },
    /**
     * @description 切换搜索条件
     * @param {Object} e input框事件源
     */
    searchConfirm(e,type) {
      if(type == 1){
        if (this.keywords.trim() == '') {
          this.$message.info(this.i18n['请输入要搜索的内容']);
          return;
        }
      }else{
        if (e && e.detail.value.trim() == '') {
          this.$message.info(this.i18n['请输入要搜索的内容']);
          return;
        }
      }
      
      // this.cid = 0;
      this.page = 1;
      this.status = 'more';
      this.scrollInfo = []; // 清空楼层数量
      this.handleSearch();
      uni.hideKeyboard();
    },
    /**
     * @func 搜索
     */
    handleSearch() {
      if (this.status != 'more') return;
      this.status = 'loading';
      let data = {
        type: 7,
        sort: this.sorts,
        order: this.order,
        page: this.page,
        list_rows: this.size,
        goods_cid: this.cid
      };
      // 判断关键字或者placeholder内容
      if (this.placeholder.trim() || this.keywords.trim()) {
        data.keyword = this.keywords;
        this.addHistory(this.keywords.trim());
      }
      // if(this.keywords.trim() == ''){
      //   this.$message.info("请输入搜索关键字");
      //   this.lists=[];
      //   return
      // }
      // 判断cid是否存在
      if (this.cid) {
        data.cid = this.cid;
      }
      if (this.page == 1) {
        this.isShowLoading = true;
      }
      // 获取商品列表接口
      this.$api
        .get(global.apiUrls.getGoodsGetGoodsList, data)
        .then(res => {
          this.isShowLoading = false;
          if (res.data.code == 1) {
            let totalSize = res.data.data.total;
            this.totalSize = Math.ceil(totalSize / 10); // 悬浮按钮总页码
            this.currentPage = this.page; //悬浮当前页面
            let list = res.data.data.data;
            if (this.page == 1) this.lists = [];
            this.lists = this.lists.concat(list);
            if (this.lists.length >= totalSize) {
              this.status = 'noMore';
            } else {
              this.status = 'more';
              this.page++;
            }
            this.isInit = true;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(err => {
          this.isShowLoading = false;
        });
    },
    // 清除关键字
    handleClear() {
      this.keywords = '';
      this.page = 1;
      this.status = 'more';
      this.advancedSearch = false;
      this.scrollInfo = []; // 清空楼层数量
      // this.handleSearch();
      uni.hideKeyboard();
    },
    // 返回
    back() {
      uni.navigateBack();
    },
    /**
     * @description 增加一条搜索历史记录
     * @param {Object} value 关键词
     */
    addHistory(value) {
      if (!value) return;
      let _history = uni.getStorageSync('SEARCHHISTORY');
      if (!_history) {
        _history = [];
      }
      _history.unshift(value);
      let history = [...new Set(_history)];
      uni.setStorageSync('SEARCHHISTORY', history);
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background: #ffffff;
}
.page {
  min-height: 100%;
   background-color: #ffffff; 
}

.head-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.nav-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.sort-wrap {
  position: fixed;
  left: 0;
  right: 0;
}

.height-100 {
  height: 100rpx;
}

.block-180 {
  width: 180rpx;
  min-width: 180rpx;
  height: 180rpx;
  min-height: 180rpx;
  position: relative;

  image {
    width: 100%;
    height: 100%;
    border-radius: 8rpx;
  }

  .null {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 8rpx;
    background-color: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    font-size: 36rpx;
    text-align: center;
    line-height: 180rpx;
  }
}

.list-item + .list-item {
  border-top: 1rpx solid #eeeeee;
}

.overlay-animate {
  position: fixed;
}

.float-action {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  // background-color: rgba(165, 165, 165, .85);
  position: fixed;
  right: 20rpx;
  bottom: 280rpx;
  z-index: 996;
  border: 1rpx solid #cccccc;

  .cuIcon-cart {
    color: #cccccc;
  }
}

.animate {
  position: fixed;
  border-radius: 50%;
  z-index: 995;
  transform-origin: 50% 50%;
  transition: transform linear 0.5s, left linear 0.5s, top cubic-bezier(0.3, -0.2, 1, 0) 0.5s !important;

  image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
  }
}

// 商品卡片line
.fu-goods-line {
  /* min-height: 570rpx; */
  padding: 24rpx;
  border-radius: 24rpx;
  overflow: hidden;
  /* background-color: #ffffff; */
  margin-top: 20rpx;
  display: flex;

  .block-246 {
    width: 172rpx;
    height: 172rpx;
    border-radius: 6rpx;
    background-color: #eeeeee;

    image {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
    }
  }

  .content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

// 商品卡片block
.fu-goods-block {
  overflow: hidden;
  margin-bottom: 20rpx;
  padding: 0 10rpx;

  .wrap-box {
    background-color: #ffffff;
    border-radius: 16rpx;

    .square-wrap {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      box-sizing: border-box;
      position: relative;

      .square-box {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 24rpx 24rpx 0 0;

        image {
          width: 100%;
          height: 100%;
          border-radius: 24rpx 24rpx 0 0;
        }
      }
    }

    .image {
      width: 100%;
      border-radius: 24rpx 24rpx 0 0;
    }
  }

  .content {
    padding: 20rpx;
  }
}

.item-activity-label {
  padding: 2rpx 5rpx;
  /* margin: 5rpx; */
  font-size: 24rpx;
  border-radius: 6rpx;
  border: 1px solid;
  margin: 0rpx 1px 0px;
  display: inline-block;
  transform: scale(0.8);
}
.padding-lr-24 {
  padding: 0 24rpx;
}
.padding-lr-4 {
  padding: 0 4rpx;
}
.search-form {
  margin-left: 12rpx;
}
.item-goods-label {
  padding: 2rpx 8rpx;
  color: #ff6464;
  font-size: 24rpx;
  margin-right: 6rpx;
  background: rgba(255, 100, 100, 0.1);
  /* opacity: 0.1; */
  border-radius: 4rpx;
}
.item-activity-label {
  padding: 0 8rpx;
  height: 32rpx;
  line-height: 30rpx;
  border: 1px solid #fa2033;
  opacity: 1;
  border-radius: 4rpx;
  font-size: 20rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #fa2033;
  margin-right: 16rpx;
  &:nth-of-type(1) {
    border: 1px solid #0a7ce6;
    color: #0a7ce6;
  }
}
.sales-number {
  margin-top: 16rpx;
}
.through-price {
  margin-left: 16rpx;
  color: #bfbfbf;
}
</style>
